feat: added TanStack Router React cursorrules#248
feat: added TanStack Router React cursorrules#248usm4nhafeez wants to merge 1 commit intoPatrickJS:mainfrom
Conversation
📝 WalkthroughWalkthroughAdded comprehensive cursor rules and documentation for TanStack Router v1 with React and TypeScript, covering file-based routing, type-safe parameters, loader-driven data fetching, search param validation, auth guards, and TanStack Query integration patterns. Includes a README update referencing the new rules. Changes
Estimated code review effort🎯 2 (Simple) | ⏱️ ~10 minutes Suggested reviewers
Poem
🚥 Pre-merge checks | ✅ 3✅ Passed checks (3 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment Warning |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 2
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@README.md`:
- Around line 181-184: Reorder the four State Management list items so they are
alphabetically sorted by their visible titles: move "React (MobX)" and "React
(React Query)" before "React (Redux, TypeScript)" so the final order reads
"React (MobX)", "React (React Query)", "React (Redux, TypeScript)", "React
(TanStack Router)"; update the block containing the link lines for "React
(Redux, TypeScript)", "React (MobX)", "React (React Query)", and "React
(TanStack Router)" accordingly.
In `@rules-new/tanstack-router.mdc`:
- Around line 1-99: Delete the duplicate tanstack-router.mdc file in the
rules-new folder: remove the file whose content begins "Type-safe routing with
TanStack Router v1..." (the duplicate of the canonical
rules/tanstack-router-react-cursorrules-prompt-file/tanstack-router.mdc), and
ensure no other references or imports point to this removed file so only the
canonical tanstack-router.mdc remains in the repository.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro
Run ID: f8a9ab0e-f1fb-4ba3-baca-49863657a115
📒 Files selected for processing (5)
README.mdrules-new/tanstack-router.mdcrules/tanstack-router-react-cursorrules-prompt-file/.cursorrulesrules/tanstack-router-react-cursorrules-prompt-file/README.mdrules/tanstack-router-react-cursorrules-prompt-file/tanstack-router.mdc
| - [React (Redux, TypeScript)](./rules/react-redux-typescript-cursorrules-prompt-file/.cursorrules) - Cursor rules for React development with Redux and TypeScript integration. | ||
| - [React (MobX)](./rules/react-mobx-cursorrules-prompt-file/.cursorrules) - Cursor rules for React development with MobX integration. | ||
| - [React (React Query)](./rules/react-query-cursorrules-prompt-file/.cursorrules) - Cursor rules for React development with React Query integration. | ||
| - [React (TanStack Router)](./rules/tanstack-router-react-cursorrules-prompt-file/.cursorrules) - Cursor rules for React development with TanStack Router v1, including file-based routing, type-safe search params, loaders, and auth guards. |
There was a problem hiding this comment.
Reorder entries alphabetically within the State Management category.
The State Management section entries should be in alphabetical order. Currently, the order is Redux → MobX → React Query → TanStack Router. The correct alphabetical order should be: MobX → React Query → Redux → TanStack Router.
As per coding guidelines, "Maintain alphabetical order within each category in the README.md file."
📝 Proposed reordering
### State Management
+- [React (MobX)](./rules/react-mobx-cursorrules-prompt-file/.cursorrules) - Cursor rules for React development with MobX integration.
+- [React (React Query)](./rules/react-query-cursorrules-prompt-file/.cursorrules) - Cursor rules for React development with React Query integration.
- [React (Redux, TypeScript)](./rules/react-redux-typescript-cursorrules-prompt-file/.cursorrules) - Cursor rules for React development with Redux and TypeScript integration.
-- [React (MobX)](./rules/react-mobx-cursorrules-prompt-file/.cursorrules) - Cursor rules for React development with MobX integration.
-- [React (React Query)](./rules/react-query-cursorrules-prompt-file/.cursorrules) - Cursor rules for React development with React Query integration.
- [React (TanStack Router)](./rules/tanstack-router-react-cursorrules-prompt-file/.cursorrules) - Cursor rules for React development with TanStack Router v1, including file-based routing, type-safe search params, loaders, and auth guards.🧰 Tools
🪛 LanguageTool
[style] ~183-~183: Three successive sentences begin with the same word. Consider rewording the sentence or use a thesaurus to find a synonym.
Context: ...t development with MobX integration. - [React (React Query)](./rules/react-query-curs...
(ENGLISH_WORD_REPEAT_BEGINNING_RULE)
[style] ~184-~184: Three successive sentences begin with the same word. Consider rewording the sentence or use a thesaurus to find a synonym.
Context: ...opment with React Query integration. - [React (TanStack Router)](./rules/tanstack-rou...
(ENGLISH_WORD_REPEAT_BEGINNING_RULE)
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@README.md` around lines 181 - 184, Reorder the four State Management list
items so they are alphabetically sorted by their visible titles: move "React
(MobX)" and "React (React Query)" before "React (Redux, TypeScript)" so the
final order reads "React (MobX)", "React (React Query)", "React (Redux,
TypeScript)", "React (TanStack Router)"; update the block containing the link
lines for "React (Redux, TypeScript)", "React (MobX)", "React (React Query)",
and "React (TanStack Router)" accordingly.
| --- | ||
| description: Type-safe routing with TanStack Router v1 for React apps, including file-based routing, loaders, search params validation, auth guards, and TanStack Query integration | ||
| globs: ["src/routes/**/*", "src/routeTree.gen.ts", "app.config.ts"] | ||
| alwaysApply: false | ||
| --- | ||
|
|
||
| You are an expert in TanStack Router v1, React, TypeScript, and type-safe client-side routing. | ||
|
|
||
| ## Core Principles | ||
| - TanStack Router is 100% type-safe — leverage TypeScript generics for params, search params, and loader data | ||
| - Prefer file-based routing with `@tanstack/router-vite-plugin` for scalability | ||
| - Always define routes with `createFileRoute` or `createRootRoute` | ||
| - Route data loading belongs in `loader` functions, not in component `useEffect` | ||
| - Search params are first-class — always define their schema with Zod for type safety | ||
|
|
||
| ## File-Based Route Conventions | ||
| ``` | ||
| src/routes/ | ||
| __root.tsx ← Root layout | ||
| index.tsx ← / route | ||
| posts/ | ||
| index.tsx ← /posts | ||
| $postId.tsx ← /posts/:postId (dynamic) | ||
| _layout.tsx ← Layout route (no path segment) | ||
| _auth/ ← Pathless auth layout group | ||
| dashboard.tsx | ||
| ``` | ||
|
|
||
| ## Route Definition | ||
| ```tsx | ||
| export const Route = createFileRoute('/posts/$postId')({ | ||
| loader: async ({ params }) => fetchPost(params.postId), | ||
| component: PostComponent, | ||
| errorComponent: ({ error }) => <ErrorBanner message={error.message} />, | ||
| pendingComponent: () => <PostSkeleton />, | ||
| }) | ||
|
|
||
| function PostComponent() { | ||
| const post = Route.useLoaderData() // type-safe | ||
| const { postId } = Route.useParams() // type-safe | ||
| return <div>{post.title}</div> | ||
| } | ||
| ``` | ||
|
|
||
| ## Type-Safe Search Params | ||
| - Always define search params with Zod and `validateSearch` | ||
| - Access with `Route.useSearch()` — never read `window.location.search` directly | ||
| ```tsx | ||
| const searchSchema = z.object({ | ||
| page: z.number().int().min(1).default(1), | ||
| q: z.string().optional(), | ||
| }) | ||
|
|
||
| export const Route = createFileRoute('/search')({ | ||
| validateSearch: searchSchema, | ||
| component: SearchPage, | ||
| }) | ||
| ``` | ||
|
|
||
| ## Navigation | ||
| - Use `<Link>` for internal navigation — never `<a href>` | ||
| - Always pass typed `params` and `search` — the compiler will catch mistakes | ||
| ```tsx | ||
| <Link to="/posts/$postId" params={{ postId: '123' }}>View Post</Link> | ||
| ``` | ||
|
|
||
| ## Loaders + TanStack Query Integration | ||
| ```tsx | ||
| export const Route = createFileRoute('/posts')({ | ||
| loader: ({ context: { queryClient } }) => | ||
| queryClient.ensureQueryData(postsQueryOptions()), | ||
| component: PostsPage, | ||
| }) | ||
| ``` | ||
|
|
||
| ## Router Context for Dependency Injection | ||
| ```tsx | ||
| // __root.tsx | ||
| interface RouterContext { queryClient: QueryClient; auth: AuthState } | ||
| export const Route = createRootRouteWithContext<RouterContext>()({ component: RootLayout }) | ||
|
|
||
| // main.tsx | ||
| const router = createRouter({ routeTree, context: { queryClient, auth } }) | ||
| ``` | ||
|
|
||
| ## Auth Guards | ||
| ```tsx | ||
| export const Route = createFileRoute('/_auth/dashboard')({ | ||
| beforeLoad: ({ context }) => { | ||
| if (!context.auth.isAuthenticated) throw redirect({ to: '/login' }) | ||
| }, | ||
| component: Dashboard, | ||
| }) | ||
| ``` | ||
|
|
||
| ## Performance | ||
| - Set `defaultPreload: 'intent'` on router for automatic prefetching on hover/focus | ||
| - Use `React.lazy` for route component code splitting | ||
| - Install `@tanstack/router-devtools` and render `<TanStackRouterDevtools />` in development |
There was a problem hiding this comment.
🧩 Analysis chain
🏁 Script executed:
#!/bin/bash
# Description: Verify that the two .mdc files are duplicates
echo "=== Comparing file sizes ==="
ls -lh rules-new/tanstack-router.mdc rules/tanstack-router-react-cursorrules-prompt-file/tanstack-router.mdc
echo -e "\n=== Computing checksums ==="
md5sum rules-new/tanstack-router.mdc rules/tanstack-router-react-cursorrules-prompt-file/tanstack-router.mdc
echo -e "\n=== Checking for differences ==="
diff rules-new/tanstack-router.mdc rules/tanstack-router-react-cursorrules-prompt-file/tanstack-router.mdc && echo "Files are identical" || echo "Files differ"Repository: PatrickJS/awesome-cursorrules
Length of output: 554
Remove duplicate file.
This file is an exact duplicate of rules/tanstack-router-react-cursorrules-prompt-file/tanstack-router.mdc. The rules-new/ directory doesn't follow the repository's established structure pattern of rules/[name]-cursorrules-prompt-file/.
Delete rules-new/tanstack-router.mdc and retain only the properly organized version.
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@rules-new/tanstack-router.mdc` around lines 1 - 99, Delete the duplicate
tanstack-router.mdc file in the rules-new folder: remove the file whose content
begins "Type-safe routing with TanStack Router v1..." (the duplicate of the
canonical
rules/tanstack-router-react-cursorrules-prompt-file/tanstack-router.mdc), and
ensure no other references or imports point to this removed file so only the
canonical tanstack-router.mdc remains in the repository.
There was a problem hiding this comment.
Pull request overview
Adds TanStack Router v1 Cursor rules for React projects to guide file-based routing, loaders, search param validation, auth guards, and TanStack Query integration.
Changes:
- Added a new TanStack Router + React rule pack under
rules/tanstack-router-react-cursorrules-prompt-file/(including.cursorrulesand documentation). - Added a new consolidated rule document at
rules-new/tanstack-router.mdc. - Linked the new rule pack from the root
README.md.
Reviewed changes
Copilot reviewed 5 out of 5 changed files in this pull request and generated 6 comments.
Show a summary per file
| File | Description |
|---|---|
| rules/tanstack-router-react-cursorrules-prompt-file/tanstack-router.mdc | Adds TanStack Router v1 guidance doc (frontmatter + examples). |
| rules/tanstack-router-react-cursorrules-prompt-file/README.md | Introduces rule-pack README describing coverage/author. |
| rules/tanstack-router-react-cursorrules-prompt-file/.cursorrules | Adds the primary Cursor rules/guidelines for TanStack Router + React. |
| rules-new/tanstack-router.mdc | Adds a consolidated TanStack Router v1 rules doc in rules-new. |
| README.md | Adds a link to the new TanStack Router rule pack. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| $postId.tsx ← /posts/:postId (dynamic segment) | ||
| _layout.tsx ← Layout route (no path segment) | ||
| _auth/ | ||
| login.tsx ← /login (grouped under auth layout) |
There was a problem hiding this comment.
In the file-based routing example, _auth/login.tsx is annotated as mapping to /login, implying _auth/ is a pathless group. Later in this ruleset you define routes like /_auth/dashboard, which treats _auth as a real path segment. Please pick one convention (pathless group vs actual segment) and update the example paths accordingly so users don’t build the wrong URLs.
| login.tsx ← /login (grouped under auth layout) | |
| login.tsx ← /_auth/login (under auth segment) |
| export const Route = createFileRoute('/_auth/dashboard')({ | ||
| beforeLoad: ({ context }) => { | ||
| if (!context.auth.isAuthenticated) { | ||
| throw redirect({ to: '/login' }) | ||
| } | ||
| }, | ||
| component: Dashboard, | ||
| }) |
There was a problem hiding this comment.
This auth-guard example uses createFileRoute('/_auth/dashboard'), but earlier in the file _auth/ is presented as a grouping mechanism (e.g., login.tsx -> /login). Align the route path here with the file-based routing convention you intend (either include /_auth everywhere or make _auth pathless and remove it from the route path).
| @@ -0,0 +1,99 @@ | |||
| --- | |||
| description: Type-safe routing with TanStack Router v1 for React apps, including file-based routing, loaders, search params validation, auth guards, and TanStack Query integration | |||
| globs: ["src/routes/**/*", "src/routeTree.gen.ts", "app.config.ts"] | |||
There was a problem hiding this comment.
globs is defined as a YAML array here, but other rules/ .mdc files consistently use a single comma-separated string (e.g., rules/react-query-cursorrules-prompt-file/react-query-general-best-practices.mdc:3). To match the repo convention (and avoid any consumer expecting a string), consider switching globs to the same string format.
| globs: ["src/routes/**/*", "src/routeTree.gen.ts", "app.config.ts"] | |
| globs: src/routes/**/*, src/routeTree.gen.ts, app.config.ts |
| $postId.tsx ← /posts/:postId (dynamic) | ||
| _layout.tsx ← Layout route (no path segment) | ||
| _auth/ ← Pathless auth layout group | ||
| dashboard.tsx |
There was a problem hiding this comment.
The file-based routing tree labels _auth/ as a “Pathless auth layout group”, but later examples use /_auth/... paths. Please clarify whether _auth is pathless or a literal path segment and make the directory comment + route paths consistent.
| @@ -0,0 +1,99 @@ | |||
| --- | |||
| description: Type-safe routing with TanStack Router v1 for React apps, including file-based routing, loaders, search params validation, auth guards, and TanStack Query integration | |||
| globs: ["src/routes/**/*", "src/routeTree.gen.ts", "app.config.ts"] | |||
There was a problem hiding this comment.
globs is an array here, but rules-new/*.mdc files use a single string value for globs (see rules-new/react.mdc:3, rules-new/typescript.mdc:3). For consistency (and to avoid any tooling expecting a string), change this to the same string format.
| globs: ["src/routes/**/*", "src/routeTree.gen.ts", "app.config.ts"] | |
| globs: "{src/routes/**/*,src/routeTree.gen.ts,app.config.ts}" |
| $postId.tsx ← /posts/:postId (dynamic) | ||
| _layout.tsx ← Layout route (no path segment) | ||
| _auth/ ← Pathless auth layout group | ||
| dashboard.tsx |
There was a problem hiding this comment.
This route-tree example calls _auth/ a pathless group, but the auth-guard snippet below uses createFileRoute('/_auth/dashboard'). Align the docs so the directory naming and the route path examples reflect the same convention.
Adds TanStack Router v1 rules for React.
Summary by CodeRabbit